import React from 'react';
import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Flex, WhiteSpace, List, Badge, Avatar, WingBlank, Tools } from 'weaver-mobile';

import RouteModal from './RouteModal';
import { openHrmCard } from '../../util';

const getLabel = Tools.getLabel;

@withRouter
@inject('centerStore')
@observer
export default class Center extends React.Component {
  static defaultProps = {
    prefixCls: 'cowork-center',
  }

  componentDidMount() {
    const { centerStore} = this.props;
    centerStore.getCoworkCounts();
    centerStore.getUserInfo();
  }

  componentWillReceiveProps(nextProps) {
    const { location, centerStore } = this.props, { location: {pathname} } = nextProps;
    if (pathname === '/center' && location.pathname === '/center/relate') {
      centerStore.getCoworkCounts();
    }
  }

  render(){
    const { prefixCls, centerStore: { getPath, coworkCounts, userInfo } } = this.props;
    let basicInfoCard = [
      {
        id: 1,
        name: getLabel(30895,'参与的协作'),
        value: toJS(coworkCounts).parteCount,
        onClick: () => {
          this.props.history.push(getPath('join'))
        }
      },
      {
        id: 2,
        name: getLabel(390680,'负责的协作'),
        value: toJS(coworkCounts).principalCount,
        onClick: () => {
          this.props.history.push(getPath('response'))
        }
      },
      {
        id: 3,
        name: getLabel(390681,'创建的协作'),
        value: toJS(coworkCounts).creatCount,
        onClick: () => {
          this.props.history.push(getPath('createCoworkList'))
        }
      }
    ];  
    return (
      <div className={prefixCls}>
        <div className={`${prefixCls}-top`}>
          <WingBlank>
            <Avatar className='common-userInfo-img' userId = {userInfo.id || ''} name={userInfo.name || ''} url={userInfo.img || ''}/>
            <div className='common-userInfo'  onClick={() => openHrmCard(userInfo.id)}>
              <div className='common-userInfo-username'>{userInfo.name}</div>
              <div className='common-userInfo-deptInfo'>{userInfo.departmentName}&nbsp;&nbsp;{userInfo.jobtitle}</div>
            </div>
          </WingBlank>
          <Flex className='common-count'>
            {
              basicInfoCard.map((item) => {
                return (
                  <Flex.Item key={item.id} onClick={item.onClick}>
                    <div className='common-count-item'>
                      <span className='common-count-value'>{item.value}</span>
                      <span className='common-count-name'>{item.name}</span>
                    </div>
                    <div className='common-count-line'></div>
                  </Flex.Item>
                )
              })
            }
          </Flex>
        </div>
        <div className={`${prefixCls}-contianer`}>
          <WhiteSpace size='md' />
          <List>
            <List.Item arrow='horizontal' extra={<Badge text={toJS(coworkCounts).relateCount}/>} onClick={() => this.props.history.push(getPath('relate'))}>{getLabel(32572,'与我相关')}</List.Item>
            <List.Item arrow='horizontal' onClick={() => this.props.history.push(getPath('publish'))}>{getLabel(390679,'我的发表')}</List.Item>
            <List.Item arrow='horizontal' onClick={() => this.props.history.push(getPath('collect'))}>{getLabel(382666,'收藏的帖子')}</List.Item>
          </List>
          <WhiteSpace size='md' />
          <List>
            <List.Item arrow='horizontal' onClick={() => this.props.history.push(getPath('theme'))}>{getLabel(32576, '主题监控')}</List.Item>
            <List.Item arrow='horizontal' onClick={() => this.props.history.push(getPath('content'))}>{getLabel(32577,'内容监控')}</List.Item>
            <List.Item arrow='horizontal' onClick={() => this.props.history.push(getPath('comment'))}>{getLabel(131886,'评论监控')}</List.Item>
          </List>
        </div>
        <RouteModal />
      </div>
    );
  }
}